<!-- #layout name=blank --sideType='market'-->
<style>
    .page-body p {
        color: #878787;
        font-size: 14px;
        line-height: 2;
        margin-bottom: 15px;
        word-break: break-all;
    }
    
    .comment {
        padding-top: 30px;
        border-top: 1px solid #eeeeee;
        margin-bottom: 30px;
    }
    
    .comment .page-header {
        border-bottom: none;
    }
    
    .comment h5 {
        font-size: 1.25rem;
    }
    
    .item-left,
    .item-right {
        margin-right: 8px;
    }
    
    .panel-body {
        padding: 0;
    }

    .color-gray {
        color: #999;
    
    }

    .media-heading {
        margin: 6px 0px;
        word-break: break-all;
    }
    
    .list-item {
        padding: 8px;
        border-top: 1px solid #bce8f1;
    }
    
    .list-item:nth-child(1) {
        border-top: none;
    }
    
    .list-item p,
    .list-item h5 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 0;
        margin-top: 0;
    }

    .list-item a {
        text-decoration: none;
    }

    .list-item:hover {
        background-color: #e9f2f7
    }
</style>
<div class="page-header">
    <h1 class="title">Discussion</h1>
</div>

<div data-bind="component: { name: 'kb-breadcrumb', params:[{
    name: 'MARKET'
},{
    name: Kooboo.text.common.Discussions,
    url: Kooboo.Route.Discussion.ListPage
},{
    name: Kooboo.text.common.detail
}]}"></div>

<div class="col-md-9">
    <div class="col-md-12 margin-bottom-25">
        <div class="article row">
            <div class="page-header">
                <div class="discussion">
                    <div class="discussion-body">
                        <h3 class="discussion-heading" data-bind="text: title, attr: { title: title }"></h3>
                        <div class="clearfix margin-bottom-10">
                            <div class="pull-left">
                                <span class="item-left color-gray" data-bind="text: userName"></span>
                                <span class="item-left color-gray" data-bind="text: date"></span>
                            </div>
                            <div class="pull-right">
                                <span class="item-right color-gray"><i class="fa fa-eye"></i>&nbsp;
                                    <!-- ko text: viewCount -->
                                    <!-- /ko -->
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row page-body">
                <div class="col-md-12">
                    <div style="word-break: break-all;" data-bind="html: content"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12 margin-bottom-25">
        <div class="comment row">
            <div class="page-header">
                <h5 data-bind="text: Kooboo.text.market.discussion.Comments + ' ('+commentCount()+')'"></h5>
            </div>
            <div class="col-md-12">
                <div class="row">
                    <ul class="media-list margin-bottom-25" data-bind="visible: comments().length, foreach: { data: comments, as: 'comment', afterRender: commentRendered  }">
                        <li class="media margin-bottom-10">
                            <a class="pull-left" href="javascript:;">
                                <img class="media-object img-circle" data-bind="attr: { 'data-src': 'holder.js/48x48?text=' + comment.firstLetter }" alt="48x48" style="width: 48px; height: 48px;">
                            </a>
                            <div class="media-body">
                                <h5 class="media-heading" style="word-break: break-all;" data-bind="html: comment.content"></h5>
                                <p class="clearfix">
                                    <span class="pull-left color-gray">
                                        <span data-bind="text: userName"></span>
                                        <span>commented at</span>
                                        <span data-bind="text: date"></span>
                                    </span>
                                    <span class="pull-right">
                                            <a href="javascript:;" data-bind="click: $parent.onToggleSubComment.bind(comment)">
                                                <i class="fa fa-comment-o item-right"></i>
                                              <!-- ko text: comment.commentCount -->
                                              <!-- /ko -->
                                            </a>
                                        </span>
                                </p>
                                <!--replyComment-->
                                <div data-bind="visible: comment.showSubComment">
                                    <div data-bind="foreach:{ data: comment.subCommentList, as: 'sub', afterRender: $parent.commentRendered }">
                                        <div class="media margin-top-15">
                                            <a class="pull-left" href="javascript:;">
                                                <img class="media-object img-circle" data-bind="attr: { 'data-src': 'holder.js/48x48?text=' + sub.firstLetter }" alt="48x48" style="width: 48px; height: 48px;">
                                            </a>
                                            <div class="media-body">
                                                <h5 class="media-heading" data-bind="html: sub.content"></h5>
                                                <p class="clearfix">
                                                    <span class="pull-left color-gray">
                                                        <span data-bind="text: sub.userName"></span>
                                                        <span>replied at</span>
                                                        <span data-bind="text: sub.date"></span>
                                                    </span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <reply-panel params="type: 'discussion', typeId: $root.id, parentId: comment.id"></reply-panel>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <hr>
                    <reply-panel params="type: 'discussion', typeId: id"></reply-panel>
                </div>
            </div>
            <div data-bind="component: { name: 'kb-pager', params: pager }"></div>
        </div>
    </div>
</div>
<div class="col-md-3 margin-top-5">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">Latest Discussions</h3>
        </div>
        <div class="panel-body" data-bind="foreach: posts">
            <div class="list-item">
                <a data-bind="attr: { href: $data.url }">
                    <h5 data-bind="text: $data.title"></h5>
                    <p data-bind="text: $data.content"></p>
                </a>
            </div>
        </div>
    </div>
</div>
<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/lib/holder.js",
            "/_Admin/Scripts/components/kbBreadcrumb.js",
            "/_Admin/Scripts/components/kbPager.js",
            "/_Admin/View/Market/Scripts/components/ReplyPanel.js"
        ])
    })()
</script>
<script src="/_Admin/View/Market/Scripts/Kooboo.Market.js"></script>
<script src="/_Admin/View/Market/Discussion/Detail.js"></script>